<template>
  <div class="slide-show" @mouseover="clearInv" @mouseout="runInv">
      <div class="slide-img"> 
          <a :href="slides[nowIndex].href">
            <!-- <img :src="slides[nowIndex].src"/> -->
            <!--幻灯片的自动切换 transition中的nowInex与 v-for中的index不一样 -->
            <transition name="slide-trans">
                <img v-if="isShow" :src="slides[nowIndex].src"/>
            </transition>
            <transition name="slide-trans-old">
                <img v-if="!isShow" :src="slides[nowIndex].src"/>
            </transition>
          </a>
      </div>
      <h2>{{slides[nowIndex].title}}</h2>
      <ul class="slide-pages">
          <li @click="goto(prevIndex)">&lt;</li>
          <li v-for="(item,index) in slides" @click="goto(index)">
              <!--class样式的处理方式 -->
              <a :class="{on:index === nowIndex}">{{index + 1}}</a>
          </li>
          <li @click="goto(nextIndex)">&gt;</li>
      </ul>
  </div>
</template>
<script>
export default {
    props:{
        slides:{ //子组件接受属性,并设置数据类型
            type:Array,
            default:[]
        },
        inv:{ 
            //Instead, use a data or computed property based on the prop's value. Prop being mutated: "invId"
            //此次使用inv,如果此次使用invId则导致图片切换数据很快，本来理解就错误
            type:Number,
            default:1000
        }
    },
    data(){
        return {
            isShow:true,
            nowIndex:0
        }
    },
    computed:{
        //使用计算属性，可以关联更新使用data中的属性,可以处理方法的返回值
        prevIndex(){
            if(this.nowIndex === 0){
                return this.slides.length - 1;
            }else{
                return this.nowIndex - 1;
            }
        },
        nextIndex(){
            if(this.nowIndex === this.slides.length -1){
                return 0;
            }else{
                return this.nowIndex + 1;
            }
        }
    },
    methods:{
      goto(index){
          //定时器模拟 10毫米
          this.isShow = false;
          //this.nowIndex是就只，考察setTimeout的作用域
          setTimeout(() => {
              this.isShow = true;
              console.log('setTimeout中执行的index   ' + index);
              this.nowIndex = index //10s重新赋给新增
              this.$emit('onchange',index);//父组件获取事件
          },10);
      },
      runInv(){
          //自动切换幻灯片
         this.invId =  setInterval(()=>{ //此次使用自动计算的invId,
            console.log('setInterval中执行的nowIndex   ' + this.nowIndex);
            this.goto(this.nextIndex);//自主执行下一个幻灯片
          },this.inv)//每隔2000s执行一次
      },
      clearInv(){
          clearInterval(this.invId);
      }
    },
    mounted:function(){ //when data changes mounted钩子
        console.log(this.slides);
        this.runInv();//手动初始化执行
    }
}
</script>
<style>
.slide-trans-enter-active{transition:all .5s}
.slide-trans-enter{transform:translateX(900px)}
.slide-trans-old-leave-active{transition:all .5s;transform:translateX(-900px)}
.slide-show{position:relative;margin:15px 15px 15px 0;width:900px;height:500px;overflow:hidden}
.slide-show h2{position:absolute;width:100%;height:100%;color:#fff;background:#000;opacity:.5;bottom:0;height:30px;text-align:left;padding-left:15px}
.slide-img{width:100%}
.slide-img img{width:100%;position:absolute;top:0}
.slide-pages{position:absolute;bottom:10px;right:15px}
.slide-pages li{display:inline-block;padding:0 10px;cursor:pointer;color:#fff}
.slide-pages li .on{text-decoration:underline}
</style>


